<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="cn.edu.lingnan.pojo.User" %>
<%
    User user = (User) session.getAttribute("user");
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            text-align: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            color: #fff;

        }
        .container {
            margin-top: 50px;
            /*background: rgba(0, 0, 0, 0.3);*/
            padding: 20px;
            border-radius: 10px;

        }
        h1 {
            color: #000000;
            font-weight: bold;
            font-family: 宋体;
            font-size: 36px;
        }
        .table-dark th, .table-dark td {
            color: #ffffff;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">欢迎, <%= user.getName() %>!</h1>
    <form id="userForm" action="StudentUpdate" method="post" accept-charset="UTF-8" style="text-align: center;">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <table class="table table-dark table-bordered">
                    <tbody>
                    <tr>
                        <th scope="row">ID</th>
                        <td><input type="text" name="id" value="<%= user.getId() %>" readonly class="form-control"></td>
                    </tr>
                    <tr>
                        <th scope="row">姓名</th>
                        <td><input type="text" name="name" value="<%= user.getName() %>" readonly class="form-control"></td>
                    </tr>
                    <tr>
                        <th scope="row">年龄</th>
                        <td><input type="text" name="age" value="<%= user.getAge() %>" readonly class="form-control"></td>
                    </tr>
                    <tr>
                        <th scope="row">性别</th>
                        <td>
                            <select name="gender" class="form-control" disabled>
                                <option value="男" <%= "男".equals(user.getGender()) ? "selected" : "" %>>男</option>
                                <option value="女" <%= "女".equals(user.getGender()) ? "selected" : "" %>>女</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">学院</th>
                        <td>
                            <select name="major" class="form-control" disabled>
                                <option value="计算机与智能教育学院" <%= "计算机与智能教育学院".equals(user.getMajor()) ? "selected" : "" %>>计算机与智能教育学院</option>
                                <option value="外语学院" <%= "外语学院".equals(user.getMajor()) ? "selected" : "" %>>外语学院</option>
                                <option value="数学院" <%= "数学院".equals(user.getMajor()) ? "selected" : "" %>>数学院</option>
                                <option value="教育学院" <%= "教育学院".equals(user.getMajor()) ? "selected" : "" %>>教育学院</option>
                                <option value="教育学院" <%= "土木工程学院".equals(user.getMajor()) ? "selected" : "" %>>土木工程学院</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">班级</th>
                        <td><input type="text" name="clname" value="<%= user.getClname() %>" readonly class="form-control"></td>
                    </tr>
                    <tr>
                        <th scope="row">地址</th>
                        <td><input type="text" name="address" value="<%= user.getAddress() %>" readonly class="form-control"></td>
                    </tr>
                    <tr>
                        <th scope="row">电话</th>
                        <td><input type="text" name="phone" value="<%= user.getPhone() %>" readonly class="form-control"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <button type="button" id="editButton" class="btn btn-primary" style="width: 20%">修改</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    document.getElementById("editButton").addEventListener("click", function() {
        var form = document.getElementById("userForm");
        var inputs = form.getElementsByTagName("input");
        var selects = form.getElementsByTagName("select");
        var isEditing = this.textContent === "保存";

        if (isEditing) {
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].readOnly = false;
            }
            for (var i = 0; i < selects.length; i++) {
                selects[i].disabled = false;
            }
            form.submit();
        } else {
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].name !== "id") {
                    inputs[i].readOnly = false;
                }
            }
            for (var i = 0; i < selects.length; i++) {
                selects[i].disabled = false;
            }
            this.textContent = "保存";
        }
    });
</script>
</body>
</html>
